<template>
  <view>
    <!-- 顶部 -->
    <view class="top_card">
      <view class="content">
        <view class="" style="display: flex;align-items: center;">
          <image src="https://s1.ax1x.com/2023/09/09/pPcuNsf.png" mode="" @click="subtraction"></image>
          <!-- <text>5.5</text> -->
          <input type="digit" min="0" placeholder="请输入血糖值" class="GIs_count" placeholder-style="font-size:32rpx"
            v-model="GIsCount" @blur="GIsBlur">
          <image src="https://s1.ax1x.com/2023/09/09/pPcutQP.png" mode="" style="width: 76rpx;height: 76rpx;" @click="addGIs"></image>
        </view>
        <view class="danwei">mmol/L</view>
      </view>
    </view>
    <!-- 记录时间 -->
    <view class="record_time">
      <view class="left">记录时间</view>
      <view class="right">
        <text class="">2023-08-05 22:23</text>
        <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
      </view>
    </view>
    <!-- 就餐状态 -->
    <view class="eat_state">
      <view class="title">就餐状态</view>
      <view class="state_box">
        <text v-for="item in stateList" @click="handleCheak(item)"
          :style="[{color:(item.id == id ? activeState.color:'#000')},{backgroundColor:(item.id==id?activeState.backgroundColor:'#fff')},{borderColor:(item.id == id ? activeState.color:'#000')}]">{{ item.state }}</text>
      </view>
    </view>
    <!-- 保存信息 -->
    <view class="save_btn">
      保存信息
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 血糖
        GIsCount: null,
        // id:选中就餐状态id
        id: null,
        // 就餐状态
        stateList: [{
            id: 1,
            state: '空腹'
          },
          {
            id: 2,
            state: '早餐后'
          },
          {
            id: 3,
            state: '午餐前'
          },
          {
            id: 4,
            state: '午餐后'
          },
          {
            id: 5,
            state: '晚餐前'
          },
          {
            id: 6,
            state: '晚餐后'
          },
          {
            id: 7,
            state: '睡前'
          },
          {
            id: 8,
            state: '凌晨'
          },
          {
            id: 9,
            state: '随机'
          },
        ],
        // 选中就餐状态样式
        activeState: {
          color: '#2AC275',
          backgroundColor: '#DBF1E1',
        }
      };
    },
    methods: {
      handleCheak(item) {
        this.id = item.id
      },
      // 
      subtraction() {
        if (this.GIsCount > 0) {
          this.GIsCount  = this.GIsCount*1 - 0.5
        } else {
          uni.showToast({
            title: '请填写正确的血糖值!',
            icon: 'none'
          })
        }
      },
      addGIs() {
        this.GIsCount = this.GIsCount*1 + 0.5
      },
      // 血糖输入框失去焦点
      GIsBlur(){
        if(this.GIsCount<0){
          uni.showToast({
            title:'请填写正确的血糖值!',
            icon:"none"
          })
          this.GIsCount = 0
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: rgb(245, 246, 250);
  }

  .top_card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 246rpx;
    background-color: #fff;
    margin-top: 36rpx;
    font-family: '思源黑体';

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-width: 360rpx;
      height: 158rpx;

      image {
        width: 88rpx;
        height: 88rpx;
      }

      .GIs_count {
        width: 200rpx;
        height: 88rpx;
        font-size: 48rpx;
        text-align: center;
      }

      text {
        font-size: 80rpx;
        font-weight: 400;
        margin: 0 20rpx;
        vertical-align: top;
      }
    }

    .danwei {
      font-size: 36rpx;
      color: rgba(128, 128, 128, 1);
    }
  }

  // 记录时间
  .record_time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100rpx;
    margin-top: 36rpx;
    padding: 0 30rpx;
    background-color: #fff;
    font-family: '思源黑体';

    .left {
      font-size: 36rpx;
    }

    .right {
      height: 100rpx;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      color: rgba(166, 166, 166, 1);

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  // 就餐状态
  .eat_state {
    width: 100%;
    height: 500rpx;
    margin-top: 36rpx;
    padding: 0 30rpx;
    overflow: hidden;
    background-color: #fff;

    .title {
      font-size: 36rpx;
      color: rgba(73, 69, 75, 1);
      margin-top: 22rpx;
    }

    .state_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      margin-top: 54rpx;

      text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200rpx;
        height: 72rpx;
        border-radius: 16rpx;
        border: 1px solid rgba(166, 166, 166, 1);
        background-color: #fff;
        margin-bottom: 54rpx;
        // background-color: #DBF1E1;
      }
    }
  }

  // 保存按钮
  .save_btn {
    position: fixed;
    bottom: 54rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 672rpx;
    height: 112rpx;
    color: #fff;
    font-size: 48rpx;
    text-align: center;
    line-height: 112rpx;
    border-radius: 32rpx;
    background: rgba(255, 121, 83, 1);
  }
</style>
